<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

            body{
                font-size: 60px;
            }
            .box1{
                width: 200px;
                height: 200px;
                background-color: #bfa;
            }

            .box2{
                width: 200px;
                height: 200px;
                background-color: orange;
                /* 
                
                    固定定位：
                        -将元素的position属性设置为fixed，则开启了固定定位
                        -使用方法和特性都跟决定定位一摸一样
                            唯一不一样的是：固定定位的参照定位是浏览器的视口进行定位的

                        固定定位定位元素不会随网页的滚动而滚动

                
                */
                position:absolute;
                bottom: 0;
                right: 0;
            }

            .box3{
                width: 200px;
                height: 200px;
                background-color: yellow;
            }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2">
        <div class="box3">
            <div class="box4"></div>
        </div>
    </div>
    <div class="box3"></div>
</body>
</html>